<template>
  <div class="item">
    <div class="label">{{props.label}}</div>
    <div class="multiple" v-if="multiple">
      <div class="o_item" :class="{active: props.modelValue==item.value}" v-for="item in options" @click="change(item)">
        {{item.label}}
      </div>
    </div>

    <div class="options" v-else>
      <div class="o_item" :class="{active: props.modelValue==item.value}" v-for="item in options" @click="change(item)">
        {{item.label}}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
  },
  label: {
    type: String,
    default: ''
  },
  multiple:{
    type: Boolean,
    default: false
  },
  // [{label:'',value:''}]
  options: {
    type: Array,
    default: []
  }
})
const emits = defineEmits(['update:modelValue'])
function change(item) {
  emits('update:modelValue', item.value)
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  .label {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #333333;
  }
  .options {
    display: flex;
    gap: 20rpx;
    .o_item {
      width: 160rpx;
      height: 60rpx;
      background: #f3f3f3;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      background: #ecf3ff !important;
      color: #468EFF;
    }
  }
  .multiple {
    display: grid;
    gap: 20rpx;
    grid-template-columns: 1fr 1fr 1fr 1fr;

  }
}
</style>